<template>
  <div class="debug-map-test">
    <h2>调试地图测试</h2>
    <div class="controls">
      <el-button @click="testECharts" type="primary">测试ECharts</el-button>
      <el-button @click="testSimpleMap" type="success">测试简单地图</el-button>
      <el-button @click="testWithoutMap" type="warning">测试无地图数据</el-button>
    </div>
    <div class="status">{{ status }}</div>
    <div ref="testContainer" class="test-container"></div>
    <div class="debug-info">
      <h4>调试信息:</h4>
      <pre>{{ debugInfo }}</pre>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'DebugMapTest',
  data() {
    return {
      chartInstance: null,
      status: '未开始',
      debugInfo: ''
    }
  },

  methods: {
    testECharts() {
      this.status = '测试ECharts基本功能...'
      this.debugInfo = ''
      
      try {
        if (this.chartInstance) {
          this.chartInstance.dispose()
        }
        
        this.chartInstance = echarts.init(this.$refs.testContainer)
        
        const option = {
          title: {
            text: 'ECharts测试'
          },
          tooltip: {},
          xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
          },
          yAxis: {},
          series: [{
            name: '测试数据',
            type: 'bar',
            data: [10, 20, 30, 40, 50]
          }]
        }
        
        this.chartInstance.setOption(option)
        this.status = 'ECharts基本功能正常'
        this.debugInfo = 'ECharts实例创建成功，基本图表渲染正常'
        
      } catch (error) {
        this.status = 'ECharts测试失败'
        this.debugInfo = `错误: ${error.message}\n堆栈: ${error.stack}`
        console.error('ECharts测试失败:', error)
      }
    },

    testSimpleMap() {
      this.status = '测试简单地图...'
      this.debugInfo = ''
      
      try {
        // 注册简单地图数据
        const simpleMapData = {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              properties: { name: '测试区域A' },
              geometry: {
                type: 'Polygon',
                coordinates: [[[100, 30], [110, 30], [110, 40], [100, 40], [100, 30]]]
              }
            },
            {
              type: 'Feature',
              properties: { name: '测试区域B' },
              geometry: {
                type: 'Polygon',
                coordinates: [[[110, 30], [120, 30], [120, 40], [110, 40], [110, 30]]]
              }
            }
          ]
        }
        
        echarts.registerMap('testMap', simpleMapData)
        this.debugInfo += '地图数据注册成功\n'
        
        if (this.chartInstance) {
          this.chartInstance.dispose()
        }
        
        this.chartInstance = echarts.init(this.$refs.testContainer)
        this.debugInfo += 'ECharts实例创建成功\n'
        
        const option = {
          title: {
            text: '简单地图测试'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}%'
          },
          visualMap: {
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            inRange: {
              color: ['#50a3ba', '#eac736', '#d94e5d']
            }
          },
          series: [
            {
              name: '测试数据',
              type: 'map',
              map: 'testMap',
              roam: true,
              data: [
                { name: '测试区域A', value: 75 },
                { name: '测试区域B', value: 25 }
              ]
            }
          ]
        }
        
        this.chartInstance.setOption(option)
        this.debugInfo += 'ECharts选项设置成功\n'
        this.status = '简单地图测试成功'
        
      } catch (error) {
        this.status = '简单地图测试失败'
        this.debugInfo += `错误: ${error.message}\n堆栈: ${error.stack}`
        console.error('简单地图测试失败:', error)
      }
    },

    testWithoutMap() {
      this.status = '测试无地图数据的图表...'
      this.debugInfo = ''
      
      try {
        if (this.chartInstance) {
          this.chartInstance.dispose()
        }
        
        this.chartInstance = echarts.init(this.$refs.testContainer)
        
        const option = {
          title: {
            text: '散点图测试'
          },
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '测试散点',
              type: 'scatter',
              data: [
                [10, 20],
                [30, 40],
                [50, 60],
                [70, 80]
              ],
              symbolSize: 20,
              itemStyle: {
                color: '#5470c6'
              }
            }
          ]
        }
        
        this.chartInstance.setOption(option)
        this.status = '散点图测试成功'
        this.debugInfo = '无地图数据的图表渲染正常'
        
      } catch (error) {
        this.status = '散点图测试失败'
        this.debugInfo = `错误: ${error.message}\n堆栈: ${error.stack}`
        console.error('散点图测试失败:', error)
      }
    }
  },

  beforeUnmount() {
    if (this.chartInstance) {
      this.chartInstance.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.debug-map-test {
  padding: 20px;
  
  h2 {
    margin-bottom: 20px;
  }
  
  .controls {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
  }
  
  .status {
    margin-bottom: 20px;
    padding: 10px;
    background: #f5f7fa;
    border-radius: 4px;
    font-weight: bold;
  }
  
  .test-container {
    width: 100%;
    height: 400px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  
  .debug-info {
    h4 {
      margin-bottom: 10px;
    }
    
    pre {
      background: #f5f7fa;
      padding: 10px;
      border-radius: 4px;
      font-size: 12px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}
</style>
